import React, { useState } from 'react';
import { Card, Row, Col, Statistic, Select, Button, Table, Layout, Menu } from 'antd';
import { 
  ArrowUpOutlined, 
  ArrowDownOutlined, 
  HomeOutlined,
  ShoppingOutlined,
  InboxOutlined,
  TruckOutlined,
  ShopOutlined,
  UserOutlined,
  MenuFoldOutlined,
  MenuUnfoldOutlined,
  DatabaseOutlined,
  ContainerOutlined,
  CheckSquareOutlined
} from '@ant-design/icons';
import { Outlet, useNavigate, useLocation } from 'react-router-dom';
import styles from './MenuManage.module.css';

const { Option } = Select;
const { Content, Sider, Header } = Layout;

const MenuManage: React.FC = () => {
  const navigate = useNavigate();
  const location = useLocation();
  const [collapsed, setCollapsed] = useState(false);
  
  // 判断是否在仪表板页面（根路径）
  const isDashboard = location.pathname === '/' || location.pathname === '/MenuManage';

  // 菜单项配置
  const menuItems = [
    {
      key: '/',
      icon: <HomeOutlined />,
      label: '仪表板',
    },
    {
      key: 'BasicManagement',
      icon: <DatabaseOutlined />,
      label: '基本管理',
      children: [
        {
          key: '/ProductManageQuery',
          label: '产品管理',
        },
        {
          key: '/ShelfManageQurey',
          label: '货架管理',
        },
        {
          key: '/ShelfManageQuery11',
          label: '货架总览',
        },
      ],
    },
    {
      key: 'InventoryManagement',
      icon: <InboxOutlined />,
      label: '库存管理',
      children: [
        {
          key: '/BoxManageQuery',
          label: '箱子型号管理',
        },
        {
          key: '/AddInandoutofStorage',
          label: '库存出入库',
        },
        {
          key: '/InandoutofStorageQuery',
          label: '出入库明细',
        },
      ],
    },
    {
      key: 'DeliveryOrderManagement',
      icon: <TruckOutlined />,
      label: '发货单管理',
      children: [
        {
          key: '/QueryPendingFreight',
          label: '待发货运单',
        },
        {
          key: '/QueryCompletedFreight',
          label: '已发货运单',
        },
      ],
    },
    {
      key: 'StocktakingManagement',
      icon: <CheckSquareOutlined />,
      label: '盘点管理',
      children: [
        {
          key: '/PendingOrders',
          label: '待盘点订单',
        },
        {
          key: '/PendingOrderConfirmation',
          label: '待确认订单',
        },
        {
          key: '/ConfirmOrder',
          label: '已确认订单',
        },
      ],
    },
    {
      key: 'WarehouseManagement',
      icon: <ShopOutlined />,
      label: '入库单管理',
      children: [
        {
          key: '/AddWarehouse',
          label: '创建入库单',
        },
      ],
    },
    {
      key: 'SystemUser',
      icon: <UserOutlined />,
      label: '系统用户',
      children: [
        {
          key: '/RechargeUser',
          label: '给用户充值',
        },
        {
          key: '/FinancialDetails',
          label: '财务明细',
        },
        {
          key: '/IdCardManage',
          label: '身份证管理',
        },
      ],
    },
  ];

  // 处理菜单点击
  const handleMenuClick = ({ key }: { key: string }) => {
    if (key === '/') {
      navigate('/');
    } else {
      // 移除前缀斜杠，因为这些是子路由
      const path = key.startsWith('/') ? key.slice(1) : key;
      navigate(path);
    }
  };

  // 获取当前选中的菜单项
  const getSelectedKeys = () => {
    if (isDashboard) return ['/'];
    // 为子路由添加前缀斜杠以匹配菜单key
    return ['/' + location.pathname.split('/').slice(1).join('/')];
  };

  // 获取当前展开的菜单项
  const getOpenKeys = () => {
    const path = location.pathname;
    if (path.includes('Product') || path.includes('Shelf')) return ['BasicManagement'];
    if (path.includes('Storage') || path.includes('Box')) return ['InventoryManagement'];
    if (path.includes('Freight')) return ['DeliveryOrderManagement'];
    if (path.includes('Order')) return ['StocktakingManagement'];
    if (path.includes('Warehouse')) return ['WarehouseManagement'];
    if (path.includes('User')) return ['SystemUser'];
    return [];
  };

  // 今日情况数据
  const todayData = [
    { label: '新增入库单', value: 0, change: 0, trend: 'down' },
    { label: '新增出库单', value: 0, change: 0, trend: 'down' },
    { label: '入库产品数', value: 20, change: 19, trend: 'up' },
    { label: '出库产品数', value: -18, change: -18, trend: 'down' },
    { label: '入库箱子数', value: 4, change: 3, trend: 'up' },
    { label: '提取订单', value: 2, change: 2, trend: 'up' },
  ];

  const renderTodayItem = (item: any, index: number) => (
    <div key={index} className={styles.todayItem}>
      <div className={styles.todayLabel}>{item.label}</div>
      <div className={styles.todayValue}>
        <span className={styles.mainValue}>{item.value}</span>
      </div>
      <div className={styles.todayChange}>
        <span>昨日</span>
        <span className={item.trend === 'up' ? styles.upTrend : styles.downTrend}>
          {item.trend === 'up' ? <ArrowUpOutlined /> : <ArrowDownOutlined />}
          {Math.abs(item.change)}
        </span>
      </div>
    </div>
  );

  // 仪表板内容
  const dashboardContent = (
    <div className={styles.dashboardContainer}>
      {/* 顶部统计卡片 - 4个横排 */}
      <Row gutter={[16, 16]} className={styles.topSection}>
        <Col span={6}>
          <Card className={styles.iconCard} bordered={false}>
            <div className={styles.iconContainer}>
              <HomeOutlined className={styles.homeIcon} />
              <div className={styles.iconLabel}>所有仓储</div>
            </div>
          </Card>
        </Col>
        <Col span={6}>
          <Card className={styles.statCard} bordered={false}>
            <div className={styles.statHeader}>
              <span className={styles.statTitle}>入库单统计</span>
              <span className={styles.statMainNumber}>194</span>
            </div>
            <div className={styles.statGrid}>
              <div className={styles.statItem}>
                <div className={styles.statValue}>51</div>
                <div className={styles.statLabel}>待接收</div>
              </div>
              <div className={styles.statItem}>
                <div className={styles.statValue}>37</div>
                <div className={styles.statLabel}>待核验</div>
              </div>
              <div className={styles.statItem}>
                <div className={styles.statValue}>0</div>
                <div className={styles.statLabel}>待确认</div>
              </div>
              <div className={styles.statItem}>
                <div className={styles.statValue}>82</div>
                <div className={styles.statLabel}>待上架</div>
              </div>
              <div className={styles.statItem}>
                <div className={styles.statValue}>24</div>
                <div className={styles.statLabel}>已上架</div>
              </div>
            </div>
          </Card>
        </Col>
        <Col span={6}>
          <Card className={styles.statCard} bordered={false}>
            <div className={styles.statHeader}>
              <span className={styles.statTitle}>出库单统计</span>
              <span className={styles.statMainNumber}>171</span>
            </div>
            <div className={styles.statGrid}>
              <div className={styles.statItem}>
                <div className={styles.statValue}>83</div>
                <div className={styles.statLabel}>待货站</div>
              </div>
              <div className={styles.statItem}>
                <div className={styles.statValue}>18</div>
                <div className={styles.statLabel}>待装箱</div>
              </div>
              <div className={styles.statItem}>
                <div className={styles.statValue}>23</div>
                <div className={styles.statLabel}>待发货</div>
              </div>
              <div className={styles.statItem}>
                <div className={styles.statValue}>47</div>
                <div className={styles.statLabel}>已发货</div>
              </div>
            </div>
          </Card>
        </Col>
        <Col span={6}>
          <div className={styles.emptySpace}></div>
        </Col>
      </Row>

      {/* 中间统计卡片 - 3个横排 */}
      <Row gutter={[16, 16]} className={styles.middleSection}>
        <Col span={8}>
          <Card className={styles.statCard} bordered={false}>
            <div className={styles.statHeader}>
              <span className={styles.statTitle}>发货单统计</span>
              <span className={styles.statMainNumber}>164</span>
            </div>
            <div className={styles.statGrid}>
              <div className={styles.statItem}>
                <div className={styles.statValue}>126</div>
                <div className={styles.statLabel}>待货站</div>
              </div>
              <div className={styles.statItem}>
                <div className={styles.statValue}>38</div>
                <div className={styles.statLabel}>已发货</div>
              </div>
            </div>
          </Card>
        </Col>
        <Col span={8}>
          <Card className={styles.statCard} bordered={false}>
            <div className={styles.statHeader}>
              <span className={styles.statTitle}>库存统计</span>
              <span className={styles.statMainNumber}>6701</span>
            </div>
            <div className={styles.statGrid}>
              <div className={styles.statItem}>
                <div className={styles.statValue}>170</div>
                <div className={styles.statLabel}>SKU种类</div>
              </div>
              <div className={styles.statItem}>
                <div className={styles.statValue}>111</div>
                <div className={styles.statLabel}>箱子总数</div>
              </div>
              <div className={styles.statItem}>
                <div className={styles.statValue}>34</div>
                <div className={styles.statLabel}>库存预警</div>
              </div>
            </div>
          </Card>
        </Col>
        <Col span={8}>
          <Card className={styles.statCard} bordered={false}>
            <div className={styles.statHeader}>
              <span className={styles.statTitle}>财务统计</span>
              <span className={styles.statMainNumber}>19309059</span>
            </div>
            <div className={styles.statGrid}>
              <div className={styles.statItem}>
                <div className={styles.statValue}>19320286</div>
                <div className={styles.statLabel}>已充值</div>
              </div>
              <div className={styles.statItem}>
                <div className={styles.statValue}>-11227</div>
                <div className={styles.statLabel}>已消费</div>
              </div>
            </div>
          </Card>
        </Col>
      </Row>

      {/* 今日情况 */}
      <Row gutter={[16, 16]} className={styles.todaySection}>
        <Col span={24}>
          <Card 
            title="今日情况" 
            className={styles.todayCard}
            bordered={false}
            extra={
              <Select defaultValue="今日" size="middle" style={{ width: 100 }}>
                <Option value="今日">今日</Option>
                <Option value="昨日">昨日</Option>
                <Option value="本周">本周</Option>
              </Select>
            }
          >
            <div className={styles.todayContent}>
              <Row gutter={[16, 16]}>
                <Col span={4}>
                  <div className={styles.todayColumn}>
                    <div className={styles.todayItem}>
                      <div className={styles.todayItemTitle}>新增入库单</div>
                      <div className={styles.todayItemValue}>0</div>
                      <div className={styles.todayItemChange}>
                        <span className={styles.changeLabel}>昨日</span>
                        <span className={styles.changeValue + ' ' + styles.decrease}>
                          <ArrowDownOutlined /> 0
                        </span>
                      </div>
                    </div>
                    <div className={styles.todayItem}>
                      <div className={styles.todayItemTitle}>提取订单</div>
                      <div className={styles.todayItemValue}>2</div>
                      <div className={styles.todayItemChange}>
                        <span className={styles.changeLabel}>昨日</span>
                        <span className={styles.changeValue + ' ' + styles.increase}>
                          <ArrowUpOutlined /> 2
                        </span>
                      </div>
                    </div>
                    <div className={styles.todayItem}>
                      <div className={styles.todayItemTitle}>充值费用</div>
                      <div className={styles.todayItemValue}>0</div>
                      <div className={styles.todayItemChange}>
                        <span className={styles.changeLabel}>昨日</span>
                        <span className={styles.changeValue + ' ' + styles.decrease}>
                          <ArrowDownOutlined /> 0
                        </span>
                      </div>
                    </div>
                  </div>
                </Col>
                <Col span={4}>
                  <div className={styles.todayColumn}>
                    <div className={styles.todayItem}>
                      <div className={styles.todayItemTitle}>新增出库单</div>
                      <div className={styles.todayItemValue}>0</div>
                      <div className={styles.todayItemChange}>
                        <span className={styles.changeLabel}>昨日</span>
                        <span className={styles.changeValue + ' ' + styles.decrease}>
                          <ArrowDownOutlined /> 0
                        </span>
                      </div>
                    </div>
                    <div className={styles.todayItem}>
                      <div className={styles.todayItemTitle}>核验订单</div>
                      <div className={styles.todayItemValue}>0</div>
                      <div className={styles.todayItemChange}>
                        <span className={styles.changeLabel}>昨日</span>
                        <span className={styles.changeValue + ' ' + styles.decrease}>
                          <ArrowDownOutlined /> 0
                        </span>
                      </div>
                    </div>
                  </div>
                </Col>
                <Col span={4}>
                  <div className={styles.bigTodayItem}>
                    <div className={styles.bigTodayTitle}>入库产品数</div>
                    <div className={styles.bigTodayValue}>307</div>
                    <div className={styles.bigTodayChange}>
                      <span className={styles.changeLabel}>昨日</span>
                      <span className={styles.changeValue + ' ' + styles.increase}>
                        <ArrowUpOutlined /> 306
                      </span>
                    </div>
                  </div>
                </Col>
                <Col span={4}>
                  <div className={styles.bigTodayItem}>
                    <div className={styles.bigTodayTitle}>出库产品数</div>
                    <div className={styles.bigTodayValue}>204</div>
                    <div className={styles.bigTodayChange}>
                      <span className={styles.changeLabel}>昨日</span>
                      <span className={styles.changeValue + ' ' + styles.decrease}>
                        <ArrowDownOutlined /> -204
                      </span>
                    </div>
                  </div>
                </Col>
                <Col span={4}>
                  <div className={styles.bigTodayItem}>
                    <div className={styles.bigTodayTitle}>入库箱子数</div>
                    <div className={styles.bigTodayValue}>4</div>
                    <div className={styles.bigTodayChange}>
                      <span className={styles.changeLabel}>昨日</span>
                      <span className={styles.changeValue + ' ' + styles.increase}>
                        <ArrowUpOutlined /> 3
                      </span>
                    </div>
                  </div>
                </Col>
                <Col span={4}>
                  <div className={styles.todayColumn}>
                    <div className={styles.todayItem}>
                      <div className={styles.todayItemTitle}>下架单数</div>
                      <div className={styles.todayItemValue}>0</div>
                      <div className={styles.todayItemChange}>
                        <span className={styles.changeLabel}>昨日</span>
                        <span className={styles.changeValue + ' ' + styles.decrease}>
                          <ArrowDownOutlined /> 0
                        </span>
                      </div>
                    </div>
                    <div className={styles.todayItem}>
                      <div className={styles.todayItemTitle}>发货单数</div>
                      <div className={styles.todayItemValue}>0</div>
                      <div className={styles.todayItemChange}>
                        <span className={styles.changeLabel}>昨日</span>
                        <span className={styles.changeValue + ' ' + styles.decrease}>
                          <ArrowDownOutlined /> 0
                        </span>
                      </div>
                    </div>
                    <div className={styles.todayItem}>
                      <div className={styles.todayItemTitle}>产生费用</div>
                      <div className={styles.todayItemValue}>0</div>
                      <div className={styles.todayItemChange}>
                        <span className={styles.changeLabel}>昨日</span>
                        <span className={styles.changeValue + ' ' + styles.decrease}>
                          <ArrowDownOutlined /> 0
                        </span>
                      </div>
                    </div>
                  </div>
                </Col>
              </Row>
            </div>
          </Card>
        </Col>
      </Row>

      {/* 月度统计 */}
      <Row gutter={[16, 16]} className={styles.chartSection}>
        <Col span={24}>
          <Card 
            title="月度统计" 
            bordered={false}
            className={styles.chartCard}
            extra={
              <div className={styles.chartControls}>
                <Select defaultValue="2025年" size="middle" style={{ width: 80, marginRight: 8 }}>
                  <Option value="2025年">2025年</Option>
                  <Option value="2024年">2024年</Option>
                </Select>
                <Select defaultValue="7月" size="middle" style={{ width: 60 }}>
                  <Option value="7月">7月</Option>
                  <Option value="6月">6月</Option>
                  <Option value="8月">8月</Option>
                </Select>
              </div>
            }
          >
            <div className={styles.chartContainer}>
              <div className={styles.chartLegend}>
                <div className={styles.legendItem}>
                  <span className={styles.legendDot} style={{ backgroundColor: '#ff6b6b' }}></span>
                  <span>产品入库</span>
                </div>
                <div className={styles.legendItem}>
                  <span className={styles.legendDot} style={{ backgroundColor: '#4ecdc4' }}></span>
                  <span>产品出库</span>
                </div>
                <div className={styles.legendItem}>
                  <span className={styles.legendDot} style={{ backgroundColor: '#45b7d1' }}></span>
                  <span>入库数</span>
                </div>
                <div className={styles.legendItem}>
                  <span className={styles.legendDot} style={{ backgroundColor: '#f9ca24' }}></span>
                  <span>出库数</span>
                </div>
                <div className={styles.legendItem}>
                  <span className={styles.legendDot} style={{ backgroundColor: '#6c5ce7' }}></span>
                  <span>财务统计</span>
                </div>
              </div>
              <div className={styles.chartWrapper}>
                <div className={styles.chartPlaceholder}>
                  <div className={styles.chartLine}></div>
                  <div className={styles.chartDate}>2025-07-29</div>
                </div>
              </div>
            </div>
          </Card>
        </Col>
      </Row>
    </div>
  );

  return (
    <Layout className={`${styles.container} ${collapsed ? styles.collapsed : ''}`}>
      <Sider 
        trigger={null} 
        collapsible 
        collapsed={collapsed}
        className={styles.sider}
        width={250}
      >
        <div className={styles.logo}>
          <h2>{collapsed ? 'WMS' : 'WMS管理系统'}</h2>
        </div>
        <Menu
          theme="dark"
          mode="inline"
          selectedKeys={getSelectedKeys()}
          defaultOpenKeys={getOpenKeys()}
          items={menuItems}
          onClick={handleMenuClick}
        />
      </Sider>
      <Layout>
        <Header className={styles.header}>
          <Button
            type="text"
            icon={collapsed ? <MenuUnfoldOutlined /> : <MenuFoldOutlined />}
            onClick={() => setCollapsed(!collapsed)}
            className={styles.collapseBtn}
          />
          <div className={styles.headerTitle}>
            {isDashboard ? '仪表板' : '管理页面'}
          </div>
        </Header>
        <Content className={styles.content}>
          {isDashboard ? dashboardContent : <Outlet />}
        </Content>
      </Layout>
    </Layout>
  );
};

export default MenuManage;
